<template>
  <div>
    <div class="background">
      <img :src="backimg" width="100%" height="100%" alt="" />
    </div>
    <div class="front">
      <el-card class="login-form-layout">
        <el-form
            autocomplete="on"
            :model="loginForm"
            ref="loginForm"
            label-position="left"
        >
          <div style="text-align: center">
            <svg-icon icon-class="login-mall" style="width: 56px;height: 56px;color: #409eff"></svg-icon>
          </div>
          <h2 class="login-title color-main">BUAA TREEHOLE</h2>
          <div v-if="state==='login'">
            <el-form-item prop="username">
              <el-input
                  name="username"
                  type="text"
                  v-model="loginForm.username"
                  autocomplete="on"
                  placeholder="请输入用户名"
              >
                <span slot="prefix">
                  <svg-icon icon-class="user" class="color-main"></svg-icon>
                </span>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                  name="password"
                  :type="pwdType"
                  @keyup.enter.native="handleLogin"
                  v-model="loginForm.password"
                  autocomplete="on"
                  placeholder="请输入密码"
              >
                <span slot="prefix">
                  <svg-icon icon-class="password" class="color-main"></svg-icon>
                </span>
                <span slot="suffix" @click="showPwd">
                  <svg-icon icon-class="eye" class="color-main"></svg-icon>
                </span>
              </el-input>
            </el-form-item>
            <el-form-item style="margin-bottom: 13px">
              <el-button
                  style="width: 100%;background: rgb(67,71,71);border-color: rgb(67,71,71)"
                  type="primary"
                  :loading="loading"
                  @click.native.prevent="handleLogin"
              >登录</el-button>
            </el-form-item>
            <el-form-item style="margin-bottom: 13px">
              <el-button
                style="width: 100%;background: rgb(67,71,71);border-color: rgb(67,71,71)"
                type="primary"
                :loading="loading"
                @click.native.prevent="stateChangeRegist"
              >注册</el-button>
            </el-form-item>
            <el-form-item style="margin-bottom: 25px">
              <el-button
                style="width: 100%;background: rgb(67,71,71);border-color: rgb(67,71,71)"
                type="primary"
                :loading="loading"
                @click.native.prevent="stateChangeVisiter"
              >游客登录</el-button>
            </el-form-item>
          </div>
          <div v-if="state==='visiter'">
            <el-form-item prop="username">
              <el-input
                name="username"
                type="text"
                v-model="loginForm.signature"
                autocomplete="on"
                placeholder="请输入签名"
              >
                <span slot="prefix">
                  <svg-icon icon-class="user" class="color-main"></svg-icon>
                </span>
              </el-input>
            </el-form-item>
            <el-form-item style="margin-bottom: 13px">
              <el-button
                style="width: 100%;background: rgb(67,71,71);border-color: rgb(67,71,71)"
                type="primary"
                :loading="loading"
                @click.native.prevent="VisitorLogin"
              >登录</el-button>
            </el-form-item>
            <el-form-item style="margin-bottom: 25px">
              <el-button
                style="width: 100%;background: rgb(67,71,71);border-color: rgb(67,71,71)"
                type="primary"
                :loading="loading"
                @click.native.prevent="stateChangeLogin"
              >返回</el-button>
            </el-form-item>
          </div>
          <div v-if="state==='regist'">
            <el-form-item prop="username">
              <el-input
                name="username"
                type="text"
                v-model="registForm.username"
                autocomplete="on"
                placeholder="请输入邮箱"
              >
                <span slot="prefix">
                  <svg-icon icon-class="user" class="color-main"></svg-icon>
                </span>
              </el-input>
            </el-form-item>
            <el-form-item prop="username">
              <el-input
                  name="signature"
                  type="text"
                  v-model="registForm.signature"
                  autocomplete="on"
                  placeholder="请输入用户名"
              >
                <span slot="prefix">
                  <svg-icon icon-class="user" class="color-main"></svg-icon>
                </span>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input style="margin-bottom: 20px"
                name="password"
                :type="pwdType"
                @keyup.enter.native="handleLogin"
                v-model="registForm.password"
                autocomplete="on"
                placeholder="请输入密码"
              >
                <span slot="prefix">
                  <svg-icon icon-class="password" class="color-main"></svg-icon>
                </span>
                <span slot="suffix" @click="showPwd">
                  <svg-icon icon-class="eye" class="color-main"></svg-icon>
                </span>
              </el-input>
              <el-input
                name="confirmpassword"
                :type="pwdType"
                @keyup.enter.native="handleLogin"
                v-model="registForm.confirmpassword"
                autocomplete="on"
                placeholder="请重复密码"
              >
                <span slot="prefix">
                  <svg-icon icon-class="password" class="color-main"></svg-icon>
                </span>
                <span slot="suffix" @click="showPwd">
                  <svg-icon icon-class="eye" class="color-main"></svg-icon>
                </span>
              </el-input>
            </el-form-item>
            <el-form-item style="margin-bottom: 13px">
              <el-button
                style="width: 100%;background: rgb(67,71,71);border-color: rgb(67,71,71)"
                type="primary"
                :loading="loading"
                @click.native.prevent="handleRegist"
              >确认注册</el-button>
            </el-form-item>
            <el-form-item style="margin-bottom: 25px">
              <el-button
                style="width: 100%;background: rgb(67,71,71);border-color: rgb(67,71,71)"
                type="primary"
                :loading="loading"
                @click.native.prevent="stateChangeLogin"
              >返回</el-button>
            </el-form-item>
          </div>
        </el-form>

      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  mounted() {},
  data() {
    return {
      backimg: require('../assets/img/blackwhite.jpg'),
      backgroundDiv: {

        backgroundImage:'url(' + require('../assets/img/tempLoginbackground.jpeg') + ')',

        backgroundRepeat:'no-repeat',

        backgroundSize:'100% 100%'

      },
      loginForm: {
        username: "",
        password: "",
        signature:"",
      },
      registForm: {
        username: "",
        password: "",
        confirmpassword:"",
        signature:"",
      },
      loading: false,
      pwdType: "password",
      state: "login",
    };
  },
  methods: {
    VisitorLogin() {
      if (this.$data.loginForm.signature !== "") {
        this.$store.state.signature = this.$data.loginForm.signature;
        this.$router.push({path: "/layout/dashboard"});
      } else {
        this.$message.error("signature can't be empty");
      }
    },
    handleRegist() {
      //alert(this.registForm.username+this.registForm.signature+this.registForm.password)
      if (this.$data.registForm.password != this.$data.registForm.confirmpassword) {
        alert("confirmpassword not equal to password")
      } else {
      this.loading = true;
      this.$store
        .dispatch("Regist", this.registForm)
        .then(response => {
          this.loading = false;
          let code = response.data.status;
          //if (code == 200) {
          if (code === "success") {
            this.$data.state = "login"
          } else {
            this.$router.push({
              path: "/error",
              query: { message: response.data.message }
            });
          }
        })
        .catch(() => {
          this.loading = false;
        });
      }
    },
    showPwd() {
      if (this.pwdType === "password") {
        this.pwdType = "";
      } else {
        this.pwdType = "password";
      }
    },
    showCPwd() {
      if (this.pwdType === "password") {
        this.pwdType = "";
      } else {
        this.pwdType = "confirmpassword";
      }
    },
    handleLogin() {
      this.$store.state.login = true;
      this.loading = true;
      this.$store
          .dispatch("Login", this.loginForm)
          .then(response => {
            this.loading = false;
            let code = response.data.status;
            //if (code == 200) {
            if (code==="success") {
              this.$router.push({
                path: "/layout/dashboard",
                //query: { data: response.data.data }
              });
            } else {
              alert("login error")
            }
          })
          .catch(() => {
            this.loading = false;
          });
    },
    stateChangeRegist() {
      this.$data.state = 'regist';
    },
    stateChangeLogin() {
      this.$data.state = 'login';
    },
    stateChangeVisiter() {
      this.$data.state = 'visiter';
    },
    visitorLogin() {

    },
    getNewSignature() {

    },
  }
};
</script>

<style scoped>
.login-form-layout {
  position: absolute;
  padding:4px;
  z-index:10;
  background:rgba(255,255,255,1);
  box-shadow:0px 0px 20px 0px rgba(0,0,0,0.2);
  border-radius:14px;
  left: 0;
  right: 0;
  width: 360px;
  margin: 140px auto;
}

.login-title {
  text-align: center;
}

.background{
  width:100%;
  height:100%;  /**宽高100%是为了图片铺满屏幕 */
  z-index:-1;
  position: absolute;
}

.front{
  z-index:1;
}

.login-center-layout {
  background: #409eff;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin-top: 200px;
}
</style>

